<script setup lang="ts">
	import { ref, reactive } from 'vue'
	const formInline = reactive({
		date: '',
		keyword: '',
		time: '',
		crtype: '',
		cztype: ''
	})
	const tableData = ref([
		{
			index: 1,
			changeTime: '2023-10-01 10:00',
			incomeType: '收入',
			financeType: '工资',
			changeAmount: 5000,
			currentBalance: 15000,
			description: '域名[health-digit.com]竞价解冻'
		},
		{
			index: 2,
			changeTime: '2023-10-02 14:30',
			incomeType: '支出',
			financeType: '购物',
			changeAmount: -200,
			currentBalance: 14800,
			description: '竞价域名[itnetcn.com]，结拍金额1200.00元, 竞价返现抵扣0元，返现余额抵扣0.00元, 实际支付1200.00元'
		},
		{
			index: 1,
			changeTime: '2023-10-01 10:00',
			incomeType: '收入',
			financeType: '工资',
			changeAmount: 5000,
			currentBalance: 15000,
			description: '域名[health-digit.com]竞价解冻'
		},
		{
			index: 2,
			changeTime: '2023-10-02 14:30',
			incomeType: '支出',
			financeType: '购物',
			changeAmount: -200,
			currentBalance: 14800,
			description: '竞价域名[itnetcn.com]，结拍金额1200.00元, 竞价返现抵扣0元，返现余额抵扣0.00元, 实际支付1200.00元'
		},
		{
			index: 1,
			changeTime: '2023-10-01 10:00',
			incomeType: '收入',
			financeType: '工资',
			changeAmount: 5000,
			currentBalance: 15000,
			description: '域名[health-digit.com]竞价解冻'
		},
		{
			index: 2,
			changeTime: '2023-10-02 14:30',
			incomeType: '支出',
			financeType: '购物',
			changeAmount: -200,
			currentBalance: 14800,
			description: '竞价域名[itnetcn.com]，结拍金额1200.00元, 竞价返现抵扣0元，返现余额抵扣0.00元, 实际支付1200.00元'
		},
		{
			index: 1,
			changeTime: '2023-10-01 10:00',
			incomeType: '收入',
			financeType: '工资',
			changeAmount: 5000,
			currentBalance: 15000,
			description: '域名[health-digit.com]竞价解冻'
		},
		{
			index: 2,
			changeTime: '2023-10-02 14:30',
			incomeType: '支出',
			financeType: '购物',
			changeAmount: -200,
			currentBalance: 14800,
			description: '竞价域名[itnetcn.com]，结拍金额1200.00元, 竞价返现抵扣0元，返现余额抵扣0.00元, 实际支付1200.00元'
		},
		{
			index: 1,
			changeTime: '2023-10-01 10:00',
			incomeType: '收入',
			financeType: '工资',
			changeAmount: 5000,
			currentBalance: 15000,
			description: '域名[health-digit.com]竞价解冻'
		},
		{
			index: 2,
			changeTime: '2023-10-02 14:30',
			incomeType: '支出',
			financeType: '购物',
			changeAmount: -200,
			currentBalance: 14800,
			description: '竞价域名[itnetcn.com]，结拍金额1200.00元, 竞价返现抵扣0元，返现余额抵扣0.00元, 实际支付1200.00元'
		},
	])
	const filterShow = ref(true)
</script>
<template>
	<div class="bs-panel">
		<div class="bs-panel-body">
			<div class="bs-panel_hd">
				<div class="bs-panel_tt bold">筛选</div>
			</div>
			<div class="filter-main" v-if="filterShow">
				<el-form :inline="true" :model="formInline" class="form-inline" size="">
					<div class="filter-cell">
						<el-form-item label="收支类型：">
							<el-radio-group v-model="formInline.crtype">
								<el-radio value="1" border>收入</el-radio>
								<el-radio value="2" border>支出</el-radio>
								<el-radio value="3" border>冻结</el-radio>
								<el-radio value="4" border>解冻</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="财务类型：">
							<el-select v-model="formInline.cztype" style="width: 260px;">
								<el-option label="近三月" value="lastThreeMonths"></el-option>
								<el-option label="今年" value="thisYear"></el-option>
								<el-option label="2023年" value="2023"></el-option>
								<el-option label="2022年" value="2022"></el-option>
								<el-option label="2021年" value="2021"></el-option>
								<el-option label="2020年" value="2020"></el-option>
								<el-option label="2020年之前" value="before2020"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="查找域名：">
							<div class="keyword-box">
								<el-input v-model="formInline.keyword" type="textarea"
									placeholder="查找域名/后缀 如：.cn 多个域名/后缀用换行分隔" style="width: 260px;" v-if="isFocused"
									@blur="blurInput" resize="none" rows="4">
									<template #suffix>
										<el-icon class="el-input__icon">
											<Search />
										</el-icon>
									</template>
								</el-input>
								<el-input v-model="formInline.keyword" type="text" placeholder="查找域名/后缀 如：.cn"
									style="width: 260px;" @focus="focusInput" v-else>
									<template #suffix>
										<el-icon class="el-input__icon">
											<Search />
										</el-icon>
									</template>
								</el-input>
							</div>
						</el-form-item>
					</div>
					<div class="filter-cell">
						<el-form-item label="时间选择">
							<el-select v-model="formInline.time" style="width: 200px;">
								<el-option label="近三月" value="lastThreeMonths"></el-option>
								<el-option label="今年" value="thisYear"></el-option>
								<el-option label="2023年" value="2023"></el-option>
								<el-option label="2022年" value="2022"></el-option>
								<el-option label="2021年" value="2021"></el-option>
								<el-option label="2020年" value="2020"></el-option>
								<el-option label="2020年之前" value="before2020"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="自定义:">
							<el-date-picker v-model="formInline.date" type="daterange" style="width: 300px;"
								range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
						</el-form-item>
						<el-form-item style="margin-left: 328px;">
							<el-button>重置全部</el-button>
							<el-button type="primary">筛选</el-button>
						</el-form-item>
					</div>
				</el-form>
			</div>
		</div>
		<div class="bs-panel_filter" @click="filterShow = !filterShow" :class="{'filter-show':filterShow}">
			<el-icon class="filter-icon" size="20">
				<DArrowRight />
			</el-icon>
		</div>
	</div>
	<div class="bs-panel table-box">
		<div class="bs-panel-body">
			<div class="bs-panel_hd">
				<div class="bs-panel_tt bold">资金明细</div>
			</div>
			<div class="table-top">搜索结果共1606条，<span class="text-primary">点击这里</span>导出表格。</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="index" label="序号" width="80" align="center" />
				<el-table-column prop="changeTime" label="变动时间" width="200" align="center" />
				<el-table-column prop="incomeType" label="收支类型" width="120" align="center" />
				<el-table-column prop="financeType" label="财务类型" align="center" width="120" />
				<el-table-column prop="changeAmount" label="变动金额（元）" align="center" width="160" />
				<el-table-column prop="currentBalance" label="当前余额（冻结金额）" width="200" align="center" />
				<el-table-column prop="description" label="描述" align="center" />
			</el-table>
			<div class="bs-panel-footer">
				<el-pagination background layout="prev, pager, next" :total="1000" />
			</div>
		</div>
	</div>
</template>
<style scoped lang='scss'>
	.table-top {
		margin-bottom: 10px;
	}

	.bs-panel_filter {
		text-align: center;
		cursor: pointer;
		padding: 10px;
		margin-top: -30px;

		.filter-icon {
			transition: .3s all;
			transform: rotate(90deg);
		}

		&.filter-show {
			.filter-icon {
				transform: rotate(270deg);
			}
		}
	}

	.filter-box {
		display: flex;
		align-items: center
	}

	.filter-box .el-select {
		margin: 0 10px;
	}

	.filter-cell ::v-deep .el-form-item {
		margin-right: 15px;
	}

	.filter-cell ::v-deep .el-radio.is-bordered {
		margin-right: 10px;
	}

	.keyword-box {
		height: 32px;
	}

	.filter-cell {
		display: flex;
		align-items: center;
	}

	.ac-link {
		line-height: 1;
		padding: 10px 15px;
		margin-left: auto;
	}

	.status-text {
		color: #222;
		font-weight: 600;
	}
</style>